<template>
<div>
        <div
            class="search_template"
            style="background:white;height:100px;"
        >
            <div
                class="content"
                style="height: 50px; display: flex; justify-content: space-around;align-items: center;"
            ></div>
            <div align="left" style="margin-left:10px">
                <el-button
                    size="mini"
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    @click="dialogFormVisible_two = true"
                >新增</el-button>
            </div>
        </div>

    <el-container style="height: 500px; border: 1px solid #eee">
        <el-container>
            <!-- <router-view></router-view> -->
            <el-table
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%" border 
            >
                <el-table-column align="center" label="栏目ID" prop="columnId"></el-table-column>
                <el-table-column align="center" label="标题" prop="columnName"></el-table-column>
                <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
                <el-table-column align="center" label="修改时间" prop="updateTime"></el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="modify_display(scope.row.uuid)">修改</el-button>
                        <el-button size="mini" type="danger" @click="open(scope.row.uuid)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
       
            <el-dialog columnName="新增功能" :visible.sync="dialogFormVisible_two">
                <el-form
                    :model="dynamicValidateForm"
                    ref="dynamicValidateForm"
                    label-width="100px"
                    class="demo-dynamic"
                >
                   <!-- <el-form-item
                        label="栏目ID"
                        prop="columnId_new"
                        :rules="[{ required: true, message: '请输入栏目ID', trigger: 'blur' }]"
                    >
                        <el-input v-model="dynamicValidateForm.columnId_new"></el-input>
                    </el-form-item> -->
                    <el-form-item
                        prop="new_role_name"
                        label="标题"
                        :rules="[{ required: true, message: '请输入标题', trigger: 'blur' },]"
                    >
                        <el-input v-model="dynamicValidateForm.new_role_name"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible_two = false">取消</el-button>
                    <el-button type="primary" @click="new_onSubmit(dynamicValidateForm)">确定</el-button>
                </div>
            </el-dialog>
            <!--修改功能-->
            <el-dialog columnName="修改功能" :visible.sync="dialogFormVisible_three">
                <el-form
                    :model="dynamicValidateForm_modify"
                    ref="dynamicValidateForm_modify"
                    label-width="100px"
                    class="demo-dynamic"
                >
                    <el-form-item
                      
                        prop="new_role_name_modify" 
                        label="栏目ID"
                        :rules="[{ required: true, message: '请输入栏目ID', trigger: 'blur' }]"
                    >
                        <el-input  :disabled="true" v-model="dynamicValidateForm_modify.new_role_name_modify"></el-input>
                    </el-form-item>
                    <el-form-item
                        prop="name_code_modify"
                        label="标题"
                        :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]"
                    >
                        <el-input v-model="dynamicValidateForm_modify.name_code_modify"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button
                        type="primary"
                        @click="onSubmit_modify(dynamicValidateForm_modify)"
                    >确定</el-button>
                    <el-button @click="dialogFormVisible_three = false">取消</el-button>
                    <!-- <el-button @click="dialogFormVisible_two = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible_two = false">确 定</el-button>-->
                </div>
            </el-dialog>
            <!--修改功能-->
        </el-container>
    </el-container>
		<el-container style="margin-top:20px;margin-bottom:20px;float:right;margin-right:20px">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageNum"
				:page-sizes="[5, 10, 20, 40]"
				:page-size="pageSize"
				layout="total,sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</el-container>
    </div>
</template>
<style>
.el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
</style>

<script>
import {
    newDeleteUser,
    newsAdd,
    get_role_jurisdiction,
    findById,
    newsEdit,
    newsList
} from '@/api/user';
export default {
    data() {
        return {
            tableData: [],
            search: '',
            dialogTableVisible: false,
            dialogFormVisible: false,
            dialogTableVisible_two: false,
            dialogFormVisible_two: false,
            dialogTableVisible_three: false,
            dialogFormVisible_three: false,
            /*****添加功能的form******/
            dynamicValidateForm: {
                new_role_name: '',
                columnId_new: ''
            },
            /******添加功能的form****/
            /******修改的form*******/
            dynamicValidateForm_modify: {
                new_role_name_modify: '',
                name_code_modify: '',
            },
            role_id_id: '',
            /******修改的form*******/
            pageNum: 1,
            pageSize: 10,
            total: 0,
            data: []
        };
    },

    // methods: {
    //   handleEdit(index, row) {
    //     console.log(index, row);
    //   },
    //   handleDelete(index, row) {
    //     console.log(index, row);
    //   }
    // },
    /********获取用户列表***********/
    created() {
        // var getUserInfo_params={
        // 	token: "eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjM5MzczZDUwLWRkZWUtNDMzOC1iNWE1LWI5OGE0NzBjNzY3NSJ9.s-rok9MHQpnLH8unFriyHwc8_8NBFeCR7zzj-sgbdUR9u-QZxu-zINqGOj2Okv74UftPbro2pAqTYrGtwPfbjw"
        // }
        this.load_jiaose_list();

        /*******获取它的权限**********/
        // var  getUserJurisdiction_params=3
        //  getUserJurisdiction( getUserJurisdiction_params).then((response) => {
        //   if (response.data.code == 200) {
        // 		console.log("这是我需要的权限",response)
        // 		// this.tableData=response.data.rows
        //   } else {
        //     this.$message.error(response.data.msg);

        //   }
        // }).catch(() => {

        // })
        /********获取它的权限*********/
        /**********获取添加角色里的权限************/
        // get_role_jurisdiction()
        //     .then(response => {
        //         if (response.data.code == 200) {
        //             // console.log('获取添加角色里的权限', response);
        //             // this.tableData=response.data.rows
        //             this.data = response.data.menus;
        //         } else {
        //             this.$message.error(response.data.msg);
        //         }
        //     })
        //     .catch(() => {});
        /**********获取添加角色里的权限***********/
    },
    /********获取用户列表**********/
    /**********删除功能***************/
    methods: {
        /******导航栏跳转功能********/
        handleSelect() {
            // console.log("===")
            this.$router.push({ path: '/article' });
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },
        /******导航栏跳转功能*********/
        open(index) {
            console.log('==--', index);
            this.$confirm('您确定要删除这条信息吗?', '提示', {
                confirmButtonText: '确定', 
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(() => {
                    /*****点击了确认*******/
                    var roleId = {
                        uuid: index
                    };
                    console.log(roleId)
                    newDeleteUser(roleId)
                        .then(response => {
                            if (response.data.code == 200) {
                              
                                this.load_jiaose_list();
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(() => {
                            console.log('我是点击了取消');
                        });
                    /******点击了确认********/
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        onSubmit() {
            console.log('submit!');
        },

        /**********修改功能数据回显*************/
        /*******树形结构********/
        renderContent(h, { node, data, store }) {
            return (
                <span class="custom-tree-node">
                    <span>{node.label}</span>
                </span>
            );
        },

        /********树形结构**********/
        /**********添加角色的功能****************/
        new_onSubmit(dynamicValidateForm) {
            this.dialogFormVisible_two = false;
            console.log('我需要的数据', dynamicValidateForm);
            var new_add_params = {
                columnName: dynamicValidateForm.new_role_name,
                columnId: dynamicValidateForm.columnId_new
            };
            newsAdd(new_add_params)
                .then(response => {
                    console.log('我是添加', response);
                    if (response.data.code == 200) {
                        this.load_jiaose_list();
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {
                    console.log('我是点击了取消');
                });
            /*******调用新增接口*********/
           
        },
        /*********添加角色的功能**************/
        /********加载角色列表********/
        load_jiaose_list() {
            var params_list = {
                pageNum: this.pageNum,
                pageSize: this.pageSize
            };
            newsList(params_list)
                .then(response => {   
                    if (response.data.code == 200) {
                        this.tableData = response.data.data.list;
                        this.total = response.data.data.total;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
        },
        /*******加载角色列表********/
        /**********角色修改功能*************/
        /********修改数据回显********/
        modify_display(role_id) {
            // console.log('===---hhhhboyang', role_id);
            this.role_id_id = role_id;
            this.dialogFormVisible_three = true;
            var getUserInfo_params = {
                uuid: role_id
            };
            let that=this;
            console.log('==', getUserInfo_params);
            findById(getUserInfo_params)
                .then(response => {
                    console.log(response.data.data)
                    if (response.data.data) {
              
                        that.dynamicValidateForm_modify.new_role_name_modify=response.data.data.columnId;
                        that.dynamicValidateForm_modify.name_code_modify = response.data.data.columnName;
            
                        
                        console.log('我需要的数据', this.getUserInfo_params);
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
        },
        /********修改数据的回显********/
        onSubmit_modify(dynamicValidateForm_modify) {
            this.dialogFormVisible_three = false;
            var new_add_params = {
                uuid: this.role_id_id,
                columnId: dynamicValidateForm_modify.new_role_name_modify,
                columnName: dynamicValidateForm_modify.name_code_modify
            };
            // console.log('===我需要的修改数据----', new_add_params);
            newsEdit(new_add_params)
                .then(response => {
                    console.log('我是添加角色', response);
                    if (response.data.code == 200) {
                        this.load_jiaose_list();
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {
                    console.log('我是点击了取消');
                });
            /*******调用新增接口*********/
            console.log('我是新增接口');
        },
        /*********角色修改功能************/
        /************分页的数据***************/
        handleSizeChange: function(size) {
            this.pageSize = size;
            this.load_jiaose_list();
        },
        handleCurrentChange: function(pageNum) {
            this.pageNum = pageNum;
            this.load_jiaose_list();
        },
        /************分页的数据*************/
    }
};
</script>